<template>
  <div class="home">
    <h2>在线理赔</h2>

    <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
    </van-divider>

    <van-button
        @click="toReportPage(1)"
        :icon="report_icon"
        type="primary"
        size="large"
        class="report-botton"
    >报案索赔
    </van-button>
    <van-button
        :icon="search_icon"
        type="primary"
        size="large"
        class="search-botton"
    >查询案件
    </van-button
    >
    <van-button :icon="claim_icon" type="info" size="large" class="claim-botton"
    >索赔须知
    </van-button
    >
    <van-button
        :icon="question_icon"
        type="info"
        size="large"
        class="question-botton"
    >问题解答
    </van-button
    >
  </div>
</template>

<script>
import {login} from '@/https/http.js';
import storage from '@/utils/storage.js'
import {Wxconst} from '@/partten';

export default {
  name: 'Home',
  data() {
    return {
      value: '',
      banner: [], //轮播图
      report_icon: require('@/assets/iconfont/money.png'),
      search_icon: require('@/assets/iconfont/search.png'),
      claim_icon: require('@/assets/iconfont/note.png'),
      question_icon: require('@/assets/iconfont/question.png'),
      code: '',
    };
  },
  components: {},
  //h5页面调试 关闭调用微信api
  mounted() {
    // debugger
    const user = storage.get("userInfo") || {}
    if (Tool.isEmpty(user)) {
      // 如果缓存localStorage中没有userInfo，则需用code去后台获取
      this.getCode();
    }
  },
  methods: {
    getUserInfo() {
      login(this.code).then((res) => {
        // console.log('openid' + res.content.openid);
        // console.log('nickname' + res.content.nickname);
        // console.log('headimgurl' + res.content.headimgurl);

        storage.set('userInfo', res.content)
      });
    },
    getCode() {
      // 非静默授权，第一次有弹框
      this.code = '';
      var callback_url = Wxconst.CALLBACK_URL; // 获取页面url
      var appid = Wxconst.APPID;
      this.code = this.getUrlCode().code; // 截取code
      if (this.code == null || this.code === '') {
        // 如果没有code，则去请求
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
            callback_url
        )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
      } else {
        // 当code不等于空时，调用后端接口获取用户信息
        this.getUserInfo();
        // 你自己的业务逻辑
      }
    },
    getUrlCode() {
      // 截取url中的code方法
      var url = location.search;
      this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        var strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
        }
      }
      return theRequest;
    },
    toReportPage(flag) {
      this.$router.push({path: '/report', query: {id: flag}});
    },
  },
};
</script>

<style lang="less" scoped>
.report-botton {
  height: 70px;
  width: 280px;
  margin-top: 14%;
  margin-bottom: 35px;
  margin-left: 12%;
  font-size: 30px;
  border-radius: 5px;
  background-color: #fdb833;
  border-color: #fdb833;
}

.search-botton {
  height: 70px;
  width: 280px;
  margin-bottom: 35px;
  margin-left: 12%;
  font-size: 30px;
  border-radius: 5px;
  background-color: #ff7f50;
  border-color: #ff7f50;
}

.claim-botton {
  height: 70px;
  width: 280px;
  margin-bottom: 35px;
  margin-left: 12%;
  font-size: 30px;
  border-radius: 5px;
}

.question-botton {
  height: 70px;
  width: 280px;
  margin-bottom: 35px;
  margin-left: 12%;
  font-size: 30px;
  border-radius: 5px;
  background-color: #00bfff;
  border-color: #00bfff;
}

h2 {
  margin-top: 10%;
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
  font-size: 30px;
}
</style>
